<template>
  <div class="container">
    <div class="img-box" @click="navDetail">
      <div class="img-content"><img
          src="https://community-server.oss-cn-beijing.aliyuncs.com/2021-05-25/58fff841-7e34-448c-8cf2-ebafb783d361下载.jpg"
          alt=""></div>
      <div class="img-title">第一季音乐节</div>
    </div>
    <div class="img-box">
      <div class="img-content"><img
          src="https://community-server.oss-cn-beijing.aliyuncs.com/2023-03-13/17fdea5d-fa31-4472-8a22-a410f7580eeb扫墓.jpg"
          alt=""></div>
      <div class="img-title">清明扫墓活动</div>
    </div>
    <div class="img-box">
      <div class="img-content"><img
          src="https://community-server.oss-cn-beijing.aliyuncs.com/2021-05-27/a678ad7c-89ec-4079-8de0-1df9bc23b7deu=105241399,2111727305&fm=26&gp=0.jpg"
          alt=""></div>
      <div class="img-title">运动会</div>
    </div>
    <div class="img-box">
      <div class="img-content"><img
          src="https://community-server.oss-cn-beijing.aliyuncs.com/2021-05-27/a678ad7c-89ec-4079-8de0-1df9bc23b7deu=105241399,2111727305&fm=26&gp=0.jpg"
          alt=""></div>
      <div class="img-title">运动会</div>
    </div>
    <div class="img-box">
      <div class="img-content"><img
          src="https://community-server.oss-cn-beijing.aliyuncs.com/2021-05-27/a678ad7c-89ec-4079-8de0-1df9bc23b7deu=105241399,2111727305&fm=26&gp=0.jpg"
          alt=""></div>
      <div class="img-title">运动会</div>
    </div>
    <div class="img-box">
      <div class="img-content"><img
          src="https://community-server.oss-cn-beijing.aliyuncs.com/2021-05-27/a678ad7c-89ec-4079-8de0-1df9bc23b7deu=105241399,2111727305&fm=26&gp=0.jpg"
          alt=""></div>
      <div class="img-title">运动会</div>
    </div>

  </div>
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router";
const router = useRouter();

/**
 * 调整详情页面
 */
const navDetail = (row: any) => {
  console.log(row);
  router.push('/student/activity/detail')
}
</script>
<style lang="scss" scoped>
.container {
  padding: 2rem 25rem;
  display: flex;
  flex-wrap: wrap;

  .img-box {
    width: 25rem;
    height: 18rem;
    border-radius: 0 0 1rem 1rem;
    background-color: #ffffffd6;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    margin: 1rem;
    display: grid;
    grid-template-rows: auto 3rem;
    text-align: center;
    color: #303133;
    font-weight: 700;
    font-style: italic;
    cursor: pointer;

    .img-content {
      overflow: hidden;

      img {
        width: 100%;
      }
    }
  }
}</style>

